<template>
	<div class="app-container app-height">
		<div class="group bg1">
			<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="108px">
				<el-form-item label="名称关键词" prop="name">
					<el-input v-model="queryParams.name" placeholder="输入分组名称关键词" clearable style="width: 320px;margin-right:20px;" @keyup.enter.native="handleQuery" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" style="height:32px;" icon="el-icon-search" @click="handleQuery">查询</el-button>
					<el-button type="primary" size="mini" style="height:32px;" icon="el-icon-refresh" @click="resetQuery">刷新</el-button>
					<el-button type="primary" size="mini" style="height:32px;" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['system:dept:add']">新增</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="groupList" row-key="groupId" border>
				<el-table-column prop="groupName" label="分组名称" align="center"></el-table-column>
				<el-table-column prop="description" label="分组描述" align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="leader" label="负责人" align="center"></el-table-column>
				<el-table-column prop="countMember" label="分组用户数" align="center">
					<template slot-scope="scope">
						<a href="javascript:;" style="color:#1183F8;" @click="showMember(scope.row)">{{scope.row.countMember}}</a>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<!-- <el-tooltip content="冻结" placement="bottom" effect="light">
				<div class="user-action action-lock"></div>
				</el-tooltip> -->
						<el-tooltip content="编辑" placement="bottom" effect="light" v-hasPermi="['system:dept:edit']">
							<div class="user-action action-edit" @click="handleUpdate(scope.row)"></div>
						</el-tooltip>
						<!-- <el-tooltip content="删除" placement="bottom" effect="light">
				<div class="user-action action-delete"  @click="handleDelete(scope.row)"></div>
				</el-tooltip> -->
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

			<el-dialog title="" :visible.sync="visible" width="1000px" @opened="dialogOpen" @open="showLoading">
				<div v-loading="dialogLoading">
					<member-list ref="memberList" @closeLoading="closeLoading" @refresh="getList"></member-list>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import { listGroup, delGroup } from "@/api/dataManagement/system/group";
	import memberList from './modules/memberList.vue';
	export default {
		name: "Group",
		components: { memberList },
		data() {
			return {
				// 遮罩层
				loading: false,
				// 显示搜索条件
				showSearch: true,
				// 表格树数据
				groupList: [],
				// 状态数据字典
				statusOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 30,
					name: ''
				},
				total: 0,
				visible: false,
				//** 当前操作分组记录 */
				record: {},
				dialogLoading: false
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询部门列表 */
			getList() {
				if (this.loading) {
					return false
				}
				this.loading = true;
				listGroup(this.queryParams).then(response => {
					this.groupList = response.rows;
					this.total = response.total
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.getList();
			},
			/** 刷新按钮操作 */
			resetQuery() {
				this.queryParams.name = '';
				this.handleQuery();
			},
			/** 新增按钮操作 */
			handleAdd(row) {
				this.$router.push({ path: '/manager/group/addGroup' })
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				if (row.groupId) {
					this.$router.push({ path: '/manager/group/editGroup', query: { id: row.groupId } })
				}
			},

			/** 删除按钮操作 */
			handleDelete(row) {
				this.$confirm('是否确认删除名称为"' + row.groupName + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function () {
					return delGroup(row.groupId);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				})
			},
			/** 展示成员模块 */
			showMember(record) {
				this.visible = true
				this.record = record
			},
			dialogOpen() {
				this.$refs.memberList.getGroupId(this.record)
			},
			showLoading() {
				this.dialogLoading = true
			},
			closeLoading() {
				this.dialogLoading = false
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/system/common.scss";
	.app-container {
		padding: 20px;
	}
	
	.group {
		padding: 0px;
	}
</style>
